<template>
  <div class="foSi14 poRel" style="padding: 20px;">
    <div class="borRad20 coFFF hei34 dis disAl cuPo poAbs fanhui bac6b7" @click.stop="fanhui()">返回列表</div>
    <div v-if="list" class="mar" style="width: 840px;">
      <div style="height: 50px;" />
      <div class="poRel">
        <div
          v-if="juDgeTrue('courseroll_edit')"
          class="borRad20 coFFF hei34 dis disAl cuPo poAbs edit bac6b7"
          @click.stop="edit('/course/courseEdit1?type='+type+'&cid='+cid)"
        >编辑</div>
        <div class="foSi12 titl">课程信息</div>
        <div class="wid100 hei44 dis disAl item-l">
          <div class="dis disAl disJuB hei100 item-r" style="border-right: 2px solid #fff;">
            <div>课程名称</div>
            <div>{{ list.name }}</div>
          </div>
          <div class="dis disAl disJuB hei100 item-r">
            <div>课程时长（分钟）</div>
            <div>{{ list.long_time }}</div>
          </div>
        </div>
        <div class="wid100 hei44 dis disAl item-l">
          <div class="dis disAl disJuB hei100 item-r" style="border-right: 2px solid #fff;">
            <div>课程类型</div>
            <div>{{ list.type_name }}</div>
          </div>
          <div class="dis disAl disJuB hei100 item-r">
            <div>老师</div>
            <div>{{ list.coach_name }}</div>
          </div>
        </div>
        <div class="wid100 hei44 dis disAl item-l">
          <div v-if="type !== 3" class="dis disAl disJuB hei100 item-r" style="border-right: 2px solid #fff;">
            <div>容纳人数</div>
            <div>{{ list.people_num }}</div>
          </div>
          <div v-if="type === 3" class="dis disAl disJuB hei100 item-r" style="border-right: 2px solid #fff;">
            <div>老师课时费（元/节）</div>
            <div>{{ list.hour_subsidy }}</div>
          </div>
          <div class="dis disAl disJuB hei100 item-r">
            <div>课程难度</div>
            <div class="dis disAl">
              <svg-icon
                v-for="(item,index) in 5"
                :key="index"
                :icon-class="index+1 <= Number(list.dif_star)?'s_xing':'k_xing'"
                class="mar0"
                style="width: 20px;height: 20px;fill: #f49352;"
              />
            </div>
          </div>
        </div>
        <div class="wid100 hei44 dis disAl item-l">
          <div class="dis disAl disJuB hei100 item-r" style="border-right: 2px solid #fff;">
            <div>颜色</div>
            <div style="width: 100px;height: 20px;" :style="'background: #'+list.colors+';'" />
          </div>
          <div class="dis disAl disJuB hei100 item-r">
            <div>排序值</div>
            <div>{{ list.sort }}</div>
          </div>
        </div>
        <div class="wid100 dis disAl item-l" style="height: 100px;">
          <div class="dis disJuB item-r" style="padding: 5px 15px;">
            <div style="padding-top: 10px;">课程展示封面图</div>
            <div style="width: 160px;height: 74px;">
              <el-image :src="list.cover_img" fit="fill" class="wh100" />
            </div>
          </div>
        </div>
        <div class="wid100 item-l" style="padding: 10px 15px;">
          <div>简介</div>
          <div
            id="richId"
            class="wid100 mar-top10"
            style="background: #f6f6f6;padding: 10px;line-height: 1.5;"
          />
        </div>
      </div>
      <div v-if="type !== 3" style="height: 50px;" />
      <div v-if="type !== 3" class="poRel">
        <div
          v-if="juDgeTrue('courseroll_edit')"
          class="borRad20 coFFF hei34 dis disAl cuPo poAbs edit bac6b7"
          @click.stop="edit('/course/courseEdit2?type='+type+'&cid='+cid)"
        >编辑</div>

        <div class="foSi12 titl">预约时间设置</div>
        <div class="wid100 set-normal-list dis disAl set-list">
          <div class="label">预约方式</div>
          <div>{{ list.res_type === 1?'不支持自主预约':list.res_type === 2?'自主预约不限制时间':'自主预约限制预约时间' }}</div>
        </div>
        <div v-if="list.res_type > 2" class="wid100 set-normal-list dis disAl">
          <div class="label">预约时间</div>
          <div v-if="list.res_type2 === 1">提前{{ list.res_day }}天，
            {{ list.res_hour1>10?list.res_hour1:'0'+list.res_hour1 }}:{{ list.res_minute1>10?list.res_minute1:'0'+list.res_minute1 }}至
            {{ list.res_hour2>10?list.res_hour2:'0'+list.res_hour2 }}:{{ list.res_minute2>10?list.res_minute2:'0'+list.res_minute2 }}
            接受自主预约
          </div>
          <div v-if="list.res_type2 === 2">
            提前{{ list.res_day }}天，{{ list.res_hour1>10?list.res_hour1:'0'+list.res_hour1 }}:{{ list.res_minute1>10?list.res_minute1:'0'+list.res_minute1 }}
            后接受自主预约</div>
          <div v-if="list.res_type2 === 3">开课前0分钟接受自主预约</div>
        </div>
        <div
          v-if="list.res_type > 1"
          class="wid100 set-normal-list dis disAl"
          :class="list.res_type > 2?'set-list':''"
        >
          <div class="label">预约截止时间</div>
          <div>课程预约人数未满，会员需早于开课前{{ list.advance }}分钟自主预约</div>
        </div>
        <div class="foSi12 titl mar-top30">排队候补设置</div>
        <div class="wid100 set-normal-list dis disAl set-list">
          <div class="label">排队候补</div>
          <div>{{ list.candidate === 1?'开启':'关闭' }}</div>
        </div>
        <div v-if="list.candidate === 1" class="wid100 set-normal-list dis disAl">
          <div class="label">最大排队人数</div>
          <div>{{ list.max_line_up_num }}人</div>
        </div>
        <div v-if="list.candidate === 1" class="wid100 set-normal-list dis disAl set-list">
          <div class="label">停止排队时间</div>
          <div>开课前{{ list.stop_queuing }}分钟</div>
        </div>
        <div v-if="list.candidate === 1" class="wid100 set-normal-list dis disAl">
          <div class="label">停止候补时间</div>
          <div>开课前{{ list.stop_waiting }}分钟</div>
        </div>
        <div class="foSi12 titl mar-top30">签到设置</div>
        <div class="wid100 set-normal-list dis disAl set-list">
          <div class="label">自主签到</div>
          <div>{{ list.self_check === 1?'开启':'关闭' }}</div>
        </div>
        <div v-if="list.self_check === 1" class="wid100 set-normal-list dis disAl">
          <div class="label">签到时间</div>
          <div v-if="list.candidate === 1">课程当天，会员可随时签到</div>
          <div v-if="list.candidate === 1">课程当天，会员可在课程结束前签到</div>
          <div v-if="list.candidate === 1">课程当天，会员可在课程结束后0分钟内签到</div>
        </div>
        <div class="wid100 set-normal-list dis disAl" :class="list.self_check === 1?'set-list':''">
          <div class="label">扫码签到</div>
          <div>{{ list.scan_check === 1?'开启':'关闭' }}</div>
        </div>
        <div
          v-if="list.scan_check === 1"
          class="wid100 set-normal-list dis disAl"
          :class="list.self_check === 1?'':'set-list'"
        >
          <div class="label">签到时间</div>
          <div v-if="list.check_in_type === 1">课程当天，会员可签到两小时内开始的课程</div>
          <div v-if="list.check_in_type === 2">课程当天，会员可在课程结束前扫码签到</div>
          <div v-if="list.check_in_type === 3">
            课程当天，会员可在课程开始前{{ list.check_front_minute }}分钟至课程结束后{{ list.check_after_minute }}分钟内扫码签到</div>
        </div>
        <div class="setting-tips__normal mar-top30">
          <svg-icon icon-class="tishi" class="mar0" style="width: 16px;height: 16px;" />
          <span>预约取消设置仅针对会员支付的约课，无卡支付的约课暂不支持会员自主预约取消</span>
        </div>
        <div class="foSi12 titl mar-top30">预约取消设置</div>
        <div v-if="list.self_cancel === 0" class="wid100 set-normal-list dis disAl set-list">
          <div class="label">自主取消</div>
          <div>关闭</div>
        </div>
        <div v-if="list.self_cancel === 1" class="wid100 set-normal-list dis disAl set-list">
          <div class="label">取消时间</div>
          <div v-if="list.self_cancel_type === 1">会员自主取消不晚于开课前{{ list.cancel_front_minute }}分钟</div>
          <div v-if="list.self_cancel_type === 2">会员自主取消不晚于开课后 {{ list.cancel_start_minute }}分钟</div>
          <div v-if="list.self_cancel_type === 3">会员自主取消不晚于课程结束后{{ list.cancel_after_minute }}分钟</div>
        </div>
      </div>
      <div style="height: 50px;" />
      <div class="poRel">
        <div
          v-if="juDgeTrue('courseroll_edit')"
          class="borRad20 coFFF hei34 dis disAl cuPo poAbs edit bac6b7"
          @click.stop="edit('/course/courseEdit3?type='+type+'&cid='+cid)"
        >编辑</div>
        <div class="foSi12 titl">付费约课</div>
        <div class="wid100 set-normal-list set-list dis disAl">
          <div class="label">付费约课</div>
          <div>{{ list.paid_course === 1?'开启':'关闭' }}</div>
        </div>
        <div v-if="list.paid_course === 1" class="wid100 set-normal-list dis disAl">
          <div class="label">课程价格</div>
          <div>{{ list.orig_price }}元</div>
        </div>
        <div v-if="list.paid_course === 1" class="wid100 set-normal-list dis disAl set-list">
          <div class="label">课程优惠价</div>
          <div>{{ list.sell_price }}元</div>
        </div>
        <div class="foSi12 titl mar-top30">支持卡类型</div>
        <div class="wid100 set-normal-list dis disAl set-list">
          <div class="label">期限卡</div>
          <div style="line-height: 1.8;">{{ list.qixian }}</div>
        </div>
        <div class="wid100 set-normal-list dis disAl">
          <div class="label">次数卡</div>
          <div style="line-height: 1.8;">{{ list.cishu }}</div>
        </div>
        <div class="wid100 set-normal-list dis disAl set-list">
          <div class="label">储值卡</div>
          <div style="line-height: 1.8;" />
        </div>
      </div>
    </div>
    <div style="height: 50px;" />
  </div>
</template>

<script>
import {
  getXuan,
  judgeButton
} from '@/utils/limits.js'
import {
  mapGetters
} from 'vuex'
import {
  getVenue
} from '@/api/venue'
import {
  courseDetails
} from '@/api/coures'
export default {
  name: 'CourseParticulars',
  components: {},
  data() {
    return {
      list: null,
      type: 1,
      cid: 0,
      url: ''
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var query = this.$route.query
    this.type = Number(query.type)
    this.cid = query.cid
    this.url = this.type === 1 ? '/course/courseroll' : this.type === 2 ? '/course/courseBoutique'
      : '/course/coursePersonal'
    var xuanList = [{
      name: '课程详情',
      url: '/course/courseParticulars?type=' + query.type + '&cid=' + query.cid,
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    this.getList()
  },
  methods: {
    juDgeTrue(name) {
      return judgeButton(name, this.roles)
    },
    edit(url) {
      this.$router.push({
        path: url
      })
    },
    fanhui() {
      this.$router.go(-1)
    },
    getList() {
      courseDetails({
        'courseid': this.cid // 1团课2精品课3私教课4班课
      }).then(response => {
        const {
          data
        } = response
        console.log(data)
        this.list = data
        setTimeout(() => {
          // 方法区
          var divID = document.getElementById('richId')
          divID.innerHTML = data.brief
        }, 10)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.fanhui {
		background: #48a9f3;
		padding: 0 24px;
		right: 63px;
		top: 10px;
		z-index: 10;
	}

	.titl {
		height: 25px;
		color: #787878;
	}

	.edit {
		background: #41c3a8;
		padding: 0 24px;
		right: 0;
		top: -20px;
	}

	.item-l {
		background: #f2f2f2;
		margin-bottom: 2px;
	}

	.item-r {
		width: 420px;
		padding: 0 15px;
	}

	.set-normal-list {
		padding: 10px;
	}

	.set-list {
		background: #f2f2f2;
	}

	.set-normal-list:hover {
		background: #616b74;
		color: #fff;
	}

	.label {
		width: 140px;
		min-width: 140px;
	}

	.setting-tips__normal {
		padding: 10px 15px;
		display: flex;
		align-items: center;
		border: 1px dashed #6b7cdd;
		color: #6b7cdd;
	}
</style>
